<template>
	<view class="home_music">
		<uni-search-bar @focus="handleClick" radius="20"></uni-search-bar>
		<view class="home_music_content">
			<swiper :indicator-dots="true"
							:style="{height: swiperHeight}"
							:autoplay="true" 
							:circular="true">
				<swiper-item v-for="item in banners"
										 :key="item.bannerId">
					<image :src="item.pic"
								mode="widthFix"
								@load="ImageLoaded"
								class="image"></image>
				</swiper-item >
			</swiper>
			<!-- hot recommend -->
			<view class="hotRecommend">
				<music-header title="推荐歌曲">
					<view class="more" @click="handleMoreClick('热歌榜')">
						<view class="text">更多</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</view>
				</music-header>
				<block v-for="(item, index) in hotSongs" :key="item.id">
					<view @click="handleSongClick(item.id, index)">
						<music-item :imageUrl="item.al.picUrl"
												:songName="item.al.name"
												:singer="item.ar[0].name">
						</music-item>
					</view>
				</block>
			</view>
			<!-- menu -->
			<view class="menu">
				<music-header title="热门歌单">
					<view class="more" @click="handleMoreMenu">
						<view class="text">更多</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</view>
				</music-header>
				<music-menu :menus="recommedMenu"></music-menu>
			</view>
			<!-- ranks -->
			<view class="ranks">
				<music-header title="热门榜单"></music-header>
				<!-- hot rank -->
				<view @click="handleMoreClick('热歌榜')">
					<music-rank :imageUrl="hotRankImage" :songs="hotRankSongs" />
				</view>
				<!-- soaring rank -->
				<view @click="handleMoreClick('飙升榜')">
					<music-rank :imageUrl="soaringRankImage" :songs="soaringRangSongs" />
				</view>
				<!-- new rank -->
				<view @click="handleMoreClick('新歌榜')">
					<music-rank :imageUrl="newRankImage" :songs="newRankSongs" />
				</view>
				<!-- original rank -->
				<view @click="handleMoreClick('原创榜')">
					<music-rank :imageUrl="originalRankImage" :songs="originalRankSongs" />
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import musicHeader from '../../components/music-header/music-header.vue'
	import musicItem from '../../components/music-item-v1/music-item-v1.vue'
	import musicRank from '../../components/music-rank/music-rank.vue'
	import musicMenu from '../../components/music-menu/music-menu.vue'
	
	import { getBanners, getSongs, getMenu } from '../../service/music_api.js'
	import { setStore, getStore } from '../../util/storage.js'
	import queryRect from '../../util/query-rect.js'
	import throttle from '../../util/throttle.js'
	
	export default {
		data() {
			return {
				banners: [],
				swiperHeight: '150px',
				hotSongs: [],
				newRankImage: '',
				newRankSongs: [],
				soaringRankImage: '',
				soaringRangSongs: [],
				originalRankImage: '',
				originalRankSongs: [],
				hotRankImage: '',
				hotRankSongs: [],
				recommedMenu: []
			}
		},
		components:{
			musicRank,
			musicItem,
			musicMenu,
			musicHeader
		},
		onLoad: function() {
			this.getContent()
		},
		methods: {
			// 处理搜索框点击事件
			handleClick() {
				uni.navigateTo({
					url: '../search_music/search_music'
				})
			},
			// 获取网络信息
			getContent() {
				// 获取轮播图
				getBanners().then(res =>{
					this.banners = res.data.banners
				})
				// 新歌榜
				getSongs(0).then(res =>{
					this.newRankSongs = res.data.playlist.tracks.slice(0,3)
					this.newRankImage = res.data.playlist.coverImgUrl
					setStore('新歌榜', res.data.playlist.tracks)
				})
				// 热歌榜
				getSongs(1).then(res =>{
					// 推荐歌曲
					this.hotSongs = res.data.playlist.tracks.slice(0,6)
					
					this.hotRankSongs = res.data.playlist.tracks.slice(0,3)
					this.hotRankImage = res.data.playlist.coverImgUrl
					setStore('热歌榜', res.data.playlist.tracks)
				})
				// 原创榜
				getSongs(2).then(res =>{
					this.originalRankSongs = res.data.playlist.tracks.slice(0,3)
					this.originalRankImage = res.data.playlist.coverImgUrl
					setStore('原创榜', res.data.playlist.tracks)
				})
				// 飙升榜
				getSongs(3).then(res =>{
					this.soaringRangSongs = res.data.playlist.tracks.slice(0,3)
					this.soaringRankImage = res.data.playlist.coverImgUrl
					setStore('飙升榜', res.data.playlist.tracks)
				})
				// 获取推荐歌单
				getMenu().then(res =>{
					this.recommedMenu = res.data.playlists
				})
			},
			// 图片加载完设置swiper高度
			ImageLoaded() {
				const throttleQueryReact = throttle(queryRect, 1000)
				throttleQueryReact('.image').then(res => {
					this.swiperHeight = res[0].height + 'px'
				})
			},
			handleMoreClick(res) {
				uni.navigateTo({
					url: '../song_detail/song_detail?id='+res
				})
			},
			handleMoreMenu() {
				uni.navigateTo({
					url: '../more_menu/more_menu'
				})
			},
			handleSongClick(id, index) {
				setStore('playlist', {
					songIndex: index,
					songLists: this.hotSongs
				})
				uni.navigateTo({
					url: '../music_player/music_player?id='+id
				})
			}
		}
	}
</script>

<style scoped>
@import './home_music';
</style>
